<template>
  <div>
    <div class="product-item-tag">
      <div class="product-item-tag-left" v-bind:style="{background:product.tabColor}"></div>
      <div class="product-item-content">
        <div v-if="product.type == 3" class="title-range">
          <div class="titles">
            <div v-for="item,index in product.names">
              <div class="tag-icon" v-bind:style="{background:product.tabColor}">{{item}}</div>
            </div>
          </div>
          <div class="product-items-container">
            <div class="fixed-product-item" v-for="item,index in product.list">
              <div class="fixed-product-item-term">{{item.term}}</div>

              <div class="fixed-product-item-rate-range">{{item.rateRange}}</div>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="title-rate">
            <div class="product-feature">
              <div style="text-align: left">
                <span style="text-align: left;font-weight: bold" v-if="product.type == 1">{{product.name}}</span>
                <div v-else class="tag-icon" v-bind:style="{background:product.tabColor}">{{product.name}}</div>
              </div>
              <div style="text-align: left;margin-top: 5px">
                <span style="text-align: left;font-size: 15px;"
                      v-for="item,index in product.features">·{{item}}
                </span>
              </div>
            </div>
            <div class="product-rate">
              <div><span style="font-size: 30px;color: #E16A53">{{product.rate}}</span> <span
                style="font-size: 15px;color: #E16A53">%</span></div>
              <span style="font-size: 15px;line-height: 15px;margin-top: 8px">{{product.rateStr}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['product'],
    name: 'HelloWorld',
    components: {},
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .product-item-tag {
    text-align: center;
    width: 100%;
    height: auto;
    display: table;
    align-items: stretch;
    flex-direction: row;
    color: #42578E;
    table-layout: fixed;
  }

  .product-item-tag-left {
    display: table-cell;
    height: 100%;
    width: 4px;
    background: red;
    color: white;
    border-radius: 4px 0px 0px 4px;
  }

  .product-item-content {
    background: white;
    padding: 10px 15px;
  }

  .tag-icon {
    text-align: left;
    background: brown;
    width: 38px;
    border-radius: 6px 3px 6px 3px;
    padding: 1px 5px 1px 5px;
    margin-left: 5px;
    color: white;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    transform: skew(-12deg);
    -webkit-transform: skew(-12deg); /* Safari 和 Chrome */
  }

  .title-rate {
    display: flex;
    flex-direction: row;
  }

  .product-feature {
    display: flex;
    flex: 2;
    text-align: center;
    flex-direction: column;
    padding-top: 10px;
  }

  .product-rate {
    display: flex;
    flex: 1;
    flex-direction: column;
    text-align: right;
    line-height: 20px;
    padding-top: 10px;
    padding-bottom: 0px;
  }

  .title-range {
    display: flex;
    flex-direction: column;
  }

  .titles {
    display: flex;
    flex-direction: row;
  }

  .product-items-container {
    display: flex;
    flex-direction: row;
    margin-top: 5px;
  }

  .fixed-product-item {
    flex: 1;
    text-align: center;
    padding-top: 5px;
  }

  .fixed-product-item-term {
    color: #42578E;
    font-size: 13px;
  }

  .fixed-product-item-rate-range {
    color: #E16A53;
    font-size: 13px;
  }

</style>
